<template>
  <div class="dashboard-editor-container">
    <panel-group :topList="topList"/>
    <el-row :gutter="16">
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="chart-wrapper">
          <!-- 加速流量 -->
          <!-- <recentlyAccelerated /> -->
          <transversechart />
        </div>
        <div class="chart-wrapper">
          <!-- 加速域名 -->
          <accelerateDomainName :prevenData ='prevenData'/>
        </div>
        
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <line-chart :prevenData ='prevenData'/>
        </div>
        <div class="chart-wrapper" >
          <transaction-table :prevenData ='prevenData'/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="chart-wrapper">
          <!-- 加速用户 -->
          <accelerateUsers/>
          <!-- <transversechart2/> -->
        </div>
        <div class="chart-wrapper">
          <!-- 系统状态 -->
          <systemStatus :list="list" :Days="Days"/>
        </div>
       
      </el-col>
    </el-row>
  </div>
</template>

<script>
import transversechart from './components/transversechart'
import transversechart2 from './components/transversechart2'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import systemStatus from './components/systemStatus'
import recentlyAccelerated from './components/recentlyAccelerated'
import accelerateDomainName from './components/accelerateDomainName'
import accelerateUsers from './components/accelerateUsers'
import TransactionTable from './components/TransactionTable'
import { formatDuration, parseTime,formatBytes } from '@/utils/index.js'
import { connrequest, GetHistorySumStreamLog } from '@/api/firstPage.js'
// import { formatBytes } from '@/utils/index.js'

export default {
  name: 'DashboardAdmin',
  inject: ["reload"], 
  components: {
    PanelGroup,
    LineChart,
    systemStatus,
    recentlyAccelerated,
    accelerateDomainName,
    accelerateUsers,
    TransactionTable,
    transversechart,
    transversechart2
  },
  data() {
    return {
      lineChartData:{
        UpByte:[],
        DownByte:[],
        TransTime:[]
      },
      list: {},
      topList:{},
      prevenData:{},
      day:1,
      Days: 0,
      control:true,
    }
  },
  created(){
    this.getData()
  },
  mounted() {
    // this.GetHistorySumStreamLog()
    // this.GetParamDictURL()

  },
  // destroyed(to, from, next) {
  //   console.log("======");
  //    clearInterval(this.refreshIntervalId);
  // },
  beforeDestroy() { 
    // console.log("在组件销毁前清理定时器");
    // 在组件销毁前清理定时器
    clearInterval(this.refreshIntervalId);
    this.refreshIntervalId = null;
    this.control = false
    // // 等待一段时间确保定时器已被清理
    // setTimeout(() => {
    
    // }, 100);
  },

  methods: {
    async GetHistorySumStreamLog(){
      // 默认取30分钟前 
      let date = new Date()
      let i = date.getMinutes()
      let StartTime = parseTime(date.setMinutes( i - 30 ),'{y}-{m}-{d} {h}:{i}:{s}')
      let lineChartData = {UpByte: [], DownByte: [], TransTime: []}
      this.lineChartData = lineChartData
    },
    async getData(){
      const resT1 = await connrequest('GetDeviceSumGroupByStatus')
      // const resT2 = await connrequest('GetNetworkServiceSumGroupByStatus')
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 1000000
        },
        Filter: {
          Status:0,
          Age:2
        }
      }
      const data2 = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 1000000
        },
        Filter: {
          Status:2,
          Age:0
        }
      }
      const resT2 = await connrequest('GetDeviceHardware',data)
      const resT3 = await connrequest('GetDeviceHardware',data2) 
      this.$set(this.topList, 'schoolOnlineCount', resT1.Data[0].Count)
      this.$set(this.topList, 'schooltotalCount', resT1.Data[0].Count+resT1.Data[1].Count)
      this.$set(this.topList, 'deviceOnlineCount', resT2.Paging.TotalCount)
      this.$set(this.topList, 'netOnlineCount', resT3.Paging.TotalCount)

      const res1 = await connrequest('GetFirstPageParam')
      this.prevenData = res1.Data || {}
      this.prevenData.EventLogDays = this.prevenData?.EventLogDays || 7
      this.prevenData.EventLogTotal = this.prevenData?.EventLogTotal ||10
      this.prevenData.processDays = this.prevenData?.processDays || 7
      // console.log(this.prevenData,111);
      // this.$set(this.prevenData,this.prevenData)
      const res = await connrequest('GetFirstPage')
      // console.log("ddddd",res,res1);
      let d = Math.floor(res.Data.KeepRunningSeconds / 3600 / 24);
      let h = Math.floor((res.Data.KeepRunningSeconds  % 86400) / 3600);
      var m = Math.floor(((res.Data.KeepRunningSeconds % 86400) % 3600) / 60);
      res.Data.KeepRunningSeconds = `${d < 1 ? '' : d}${d < 1 ? '' : '天'} ${h}小时 ${m}分钟`;
      res.Data.EthIP = res.Data.EthIP ? res.Data.EthIP : '接口无效'
      res.Data.WifiIP = res.Data.WifiIP ? res.Data.WifiIP : '接口无效'
      let now = new Date().getTime()
      // this.Days = this.dateTrans(res.Data.ValidTime*1000 - now)
      this.Days = Math.floor((res.Data.ValidTime*1000 - now) / 86400 / 1000)
      res.Data.ValidTime = parseTime(res.Data.ValidTime, '{y}-{m}-{d}')
      res.Data.CurrentTime = parseTime(res.Data.CurrentTime)
      res.Data.MemUsedPct = ((res.Data.MemUsed / res.Data.MemTotal) * 100).toFixed(1) * 1
      res.Data.MemUsed = (res.Data.MemUsed / 1000000).toFixed(2) + 'G'
      res.Data.MemTotal = (res.Data.MemTotal / 1000000).toFixed() + 'G'
      res.Data.DiskUsedPct = ((res.Data.DiskUsed / res.Data.DiskTotal) * 100).toFixed(1) * 1
      res.Data.DiskUsed = (res.Data.DiskUsed / 1000000).toFixed(2) + 'G'
      res.Data.DiskTotal = (res.Data.DiskTotal / 1000000).toFixed(0) + 'G'
      res.Data.AmazonUsedSeconds = formatDuration(res.Data.AmazonUsedSeconds)
      this.list = {...res.Data}
      this.$set(this.topList, 'DiskUsed', res.Data.DiskUsed)
      this.$set(this.topList, 'DiskTotal', res.Data.DiskTotal)
      this.getPageInfo()
    },
    async getPageInfo(){ 
      this.prevenData.AutomaticRefreshInterval = this.prevenData.AutomaticRefreshInterval || 0
      if(this.prevenData.AutomaticRefreshInterval && this.control)
      {
        this.refreshIntervalId = setInterval(() => {
          // console.log("刷新"); 
          this.reload()
        }, this.prevenData.AutomaticRefreshInterval * 1000);

        // // this.$router.beforeEach 注册了一个全局前置守卫
        // this.$router.beforeEach((to, from, next) => {
        //   this.control = false

        //   console.log("=======",to,from,next);
        //   clearInterval(this.refreshIntervalId);
        //   this.refreshIntervalId = null;
        //   next();
        // });
      }
    },
    // 获取域名分类
    async GetParamDictURL(){
      const res = await connrequest('GetParamDictURL')
      window.sessionStorage.setItem('ParamDictURL', JSON.stringify(res.Data))
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
  ::v-deep .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 16px;
    .el-table--medium th, .el-table--medium td{
      padding: 3px  0!important;
    }
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar{
    width:3px !important;
    background-color:#F5F5F5 !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
    box-shadow:inset 0 0 6px rgba(0,0,0,0.3) !important;
    background-color:#F5F5F5 !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
    border-radius:10px !important;
    box-shadow:inset 0 0 6px rgba(0,0,0,.3) !important;
    background-color:#999 !important;
  }
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>